<template>
	<view class="swiper-list-container">
		<scroll-view class="tabs-wrapper" id="tabsWrapper" :scroll-x="true"
			:scroll-into-view="`tabItem${selectedIndex}`" :scroll-with-animation="true">
			<view class="tabs-wrap">
				<view class="tabs-item" :class="{ selected: selectedIndex == index }" :id="`tabItem${index}`"
					v-for="(tab, index) in tabs" :key="index" @tap.stop="onTapTab(tab, index)">
					<view style="">
						<image :src="tab.image" style="width: 450rpx;height: 550rpx;border-radius: 12rpx;" />
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<!-- 页面数据，页面逻辑 -->
<script>
	let _this;
	let _app = getApp();
	import {
		goNav
	} from '@/lib/Comment.js'
	export default {
		name: "slidingList",
		model: {
			change: {
				type: Function
			},
			selectedIndex: {
				type: Number,
				default: 0
			}
		},
		props: {
			tabs: {
				type: Array,
				default: () => {
					return []
				}
			},

		},


		/**
		 * 页面数据
		 */
		data() {
			return {
				selectedIndex: 0,
			};
		},

		/**
		 * 页面生命周期 - 监听页面加载
		 * @param {Object} options 传递过来的参数对象
		 */
		async onLoad(options) {
			_this = this;
		},

		/**
		 * 页面生命周期 - 监听页面显示
		 */
		async onShow() {},

		/**
		 * 页面生命周期 - 监听页面初次渲染完成
		 */
		async onReady() {

		},

		/**
		 * 页面生命周期 - 监听页面隐藏
		 */
		async onHide() {},

		/**
		 * 页面生命周期 - 监听页面卸载
		 */
		async onUnload() {},

		/**
		 * 页面生命周期 - 监听窗口尺寸变化
		 * App、微信小程序
		 */
		async onResize() {},

		/**
		 * 页面生命周期 - 监听用户下拉动作
		 */
		async onPullDownRefresh() {

		},

		/**
		 * 页面生命周期 - 页面上拉触底事件的处理函数
		 */
		async onReachBottom() {},

		/**
		 * 页面生命周期 - 点击 tab 时触发
		 * 微信小程序、百度小程序、H5、App（自定义组件模式）
		 * @param {String} event.index 被点击tabItem的序号，从0开始
		 * @param {String} event.pagePath 被点击tabItem的页面路径
		 * @param {String} event.text 被点击tabItem的按钮文字
		 */
		async onTabItemTap(event) {},

		/**
		 * 页面生命周期 - 用户点击右上角分享
		 * 微信小程序、百度小程序、字节跳动小程序、支付宝小程序
		 */
		async onShareAppMessage() {},

		/**
		 * 页面生命周期 - 监听页面滚动
		 * @param {Number} event.scrollTop 页面在垂直方向已滚动的距离（单位px）
		 */
		async onPageScroll(event) {},

		/**
		 * 页面生命周期 - 监听原生标题栏按钮点击事件
		 * 5+App、H5
		 * @param {Number} event.index 原生标题栏按钮数组的下标
		 */
		async onNavigationBarButtonTap(event) {},

		/**
		 * 页面生命周期 - 监听页面返回
		 * App、H5
		 * @param {String} event.from	触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法
		 * 注意事项：
		 * - 只有在该函数中返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑；
		 * - 不返回或返回其它值，均会执行默认的返回行为；
		 * - H5 平台，顶部导航栏返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()；
		 */
		async onBackPress(event) {},

		/**
		 * 页面生命周期 - 监听原生标题栏搜索输入框输入内容变化事件
		 * App、H5
		 */
		async onNavigationBarSearchInputChanged() {},

		/**
		 * 页面生命周期 - 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的 "搜索" 按钮时触发
		 * App、H5
		 */
		async onNavigationBarSearchInputConfirmed() {},

		/**
		 * 页面生命周期 - 监听原生标题栏搜索输入框点击事件
		 * App、H5
		 */
		async onNavigationBarSearchInputClicked() {},

		/**
		 * 页面函数
		 */
		methods: {
			/**
			 * 切换Tab
			 * @param {Object} tab 数据对象
			 * @param {Number} index 数据下标
			 */
			onTapTab(tab, index) {
				// 更新Index
				// this.selectedIndex = index;
				this.$emit('change', index, this.tabs[index].id)
				goNav(tab.url)
			},




		}
	};
</script>

<!-- 页面样式 -->
<style lang="scss" scoped>
	.swiper-list-container {

		overflow: hidden;
		display: flex;
		flex-direction: column;

		.tabs-wrapper {
			//height: 80upx;
			width: 100%;
			flex-shrink: 0;
		}

		.tabs-wrap {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			flex-wrap: nowrap;
		}

		.tabs-item {
			font-size: 26upx;
			color: #050505;
			height: 100%;
			word-wrap: normal;
			white-space: nowrap;
			padding-right: 16upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&.selected {
				color: #ce7500;
			}
		}

		.list-wrapper {
			flex: 1;
			overflow: hidden;
		}

		.list-item,
		.list-scroll-view {
			height: 100%;
			overflow: hidden;
		}
	}

	.text {
		display: block;
		text-align: center;
		font-size: 26upx;
		font-weight: bold;
		color: #050505;
		padding: 20upx;
	}

	.item {
		padding: 0 26rpx;
		height: 90rpx;
		line-height: 36rpx;
		border-radius: 12rpx;
		background: rgba(254, 254, 254, 1.0);
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(239, 239, 239, 0.7);
		font-size: 24rpx;
		color: rgba(51, 51, 51, 1);

	}
</style>
